<template>
  <div class="app-container">
    <el-row class="pagecenter">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="账号类型">
          <el-select v-model="listQuery.roleid" placeholder="账号类型" class="selectStyle">
            <el-option v-for="item in roles" :key="item.roleid" :label="item.rolename" :value="item.roleid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序方式">
          <el-select v-model="listQuery.ordertype" placeholder="排序方式" class="selectStyle">
            <el-option label="默认" value=""></el-option>
            <el-option label="最近登录" value="lastLogin"></el-option>
            <el-option label="最近注册" value="usercreatedate"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker v-model="dateScope" type="daterange" placeholder="选择时间范围" format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="关键词查询">
          <el-input placeholder="账号名称" v-model="listQuery.username" :maxlength="11" @keyup.enter.native="fetchData"></el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <div class="btnGroup">
        <el-button @click="fetchData" icon="search">查询</el-button>
        <el-button @click="resetFetch">
          <icon-svg icon-class="zhongzhi1"></icon-svg>&nbsp;&nbsp;重置条件</el-button>
        <el-button icon="document" @click="handleExcel" v-show="btnVisible.isExport">导出excel</el-button>
        <span class="createBtn">
          <el-button @click="createUser" v-show="btnVisible.isAdd">
            <span>
              <icon-svg icon-class="xinjian"></icon-svg>&nbsp;&nbsp;新建账号</span>
          </el-button>
        </span>
      </div>
    </el-row>
    <el-row class="pageborder">
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" :fit=true highlight-current-row tooltip-effect="dark" style="width: 100%">
        <el-table-column align="center" label='序号' width="80">
          <template scope="scope">
             {{ page.pageSize * (page.currentPage - 1) + scope.$index + 1}}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="uid" label="编号" width="100">
                    <template scope="scope">
                      <span>{{scope.row.uid}}</span>
                    </template>
                  </el-table-column> -->
        <el-table-column prop="username" label="账号名称" min-width="130" :show-overflow-tooltip="true" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.username}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="countType" label="账号类型" min-width="120" header-align="center" align="left">
          <template scope="scope">
            {{scope.row.countType}}
          </template>
        </el-table-column>
        <el-table-column prop="usercreatedate" label="注册时间" min-width="180" :show-overflow-tooltip="true" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.usercreatedate}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lastlogin" label="最近登录" min-width="170" :show-overflow-tooltip="true" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.lastlogin}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="loginaddress" label="登录地址" min-width="210" :show-overflow-tooltip="true" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.loginaddress}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="usval" label="状态" min-width="80" header-align="center" align="left">
          <template scope="scope">
            <span>{{scope.row.usval}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="180" header-align="center" align="center">
          <template scope="scope">
            <el-button icon="edit" type="small" @click="editUser(scope.$index,scope.row)" v-show="btnVisible.isEdit">编辑</el-button>
            <el-button type="small" @click="freezeUser(scope.$index,scope.row)" v-show="btnVisible.isEnable">
              <span>
                <icon-svg v-show="scope.row.userstatus === '0'" icon-class="jinyong"></icon-svg>
                <icon-svg v-show="scope.row.userstatus !== '0'" icon-class="qiyong"></icon-svg>&nbsp;&nbsp;{{scope.row.userstatus === '0'? '禁用':'启用'}}</span>
            </el-button>
            <!-- <el-button v-if="scope.row.userstatus == 1 ?false:true" icon="delete" type="small" @click="freezeUser(scope.$index,scope.row,1)" v-show="btnVisible.isEnable">禁用</el-button>
                <el-button v-if="scope.row.userstatus == 0 ?false:true" icon="delete" type="small" @click="freezeUser(scope.$index,scope.row,0)" v-show="btnVisible.isEnable">启用</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagination" v-if="page.total > 0 ? true : false">
      <el-pagination @current-change="handleCurrentChange" :page-size="page.pageSize" :current-page.sync="page.currentPage" 
          layout="total, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </el-row>
  </div>
</template>

<style scoped>
.pagetop {
  margin-bottom: 20px;
}

.pagination {
  text-align: center;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.colSpace {
  margin-left: 5px;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewBtn {
  float: right;
}

.selectStyle {
  width: 145px;
}

.el-form-item {
  margin-bottom: 15px;
}

.btnGroup {
  margin-bottom: 15px;
}

.createBtn {
  float: right;
}

.el-form-item {
  margin-bottom: 15px;
}
</style>

<script>
import { getRolesList, getUsersList, saveUser } from 'api/system';
import { parseTime } from 'utils/index';
import { btnIsVisible, getUrlParams, trimStr } from 'utils/customer';

export default {
  data() {
    return {
      list: null,
      listQuery: {
        username: '',
        roleid: '',
        createdatestart: '',
        createdateend: '',
        ordertype: ''
      },
      page: {
        pageSize: null,
        total: null,
        totalPage: null,
        currentPage: null
      },
      listLoading: true,
      dateScope: null,
      roles: [],
      btnVisible: {
        isEdit: false,
        isAdd: false,
        isView: false,
        isExport: false,
        isEnable: false
      },
      excelParams: '',
      excelUrl: '',
    }
  },
  watch: {
    'listQuery.roleid': function(val,oldval) {
      if (val) {
        this.handleCurrentChange(1)
      } else {
        if (!val && oldval) {
          this.handleCurrentChange(1)
        }
      }
    },
    'listQuery.ordertype': function(val,oldval) {
      if (val) {
        this.handleCurrentChange(1)
      } else {
        if (!val && oldval) {
          this.handleCurrentChange(1)
        }
      }
    },
    // 'listQuery.username': function(val, oldval) {
    //   if (oldval && !val) {
    //     this.page.currentPage = 1
    //   }
    // },
    dateScope: function(val, oldval) {
      if (val || (oldval && !val)) {
        this.handleCurrentChange(1)
      }
    },
  },
  created() {
    this.getRoles();
    this.fetchData();
    this.getBtnVisbleStatus();
  },
  methods: {
    getBtnVisbleStatus() {
      this.btnVisible.isEdit = btnIsVisible('ACCOUNT_MANAGE_UPDATE') || false;
      this.btnVisible.isAdd = btnIsVisible('ACCOUNT_MANAGE_INSERT') || false;
      this.btnVisible.isExport = btnIsVisible('ACCOUNT_MANAGE_EXPORT') || false;
      this.btnVisible.isEnable = btnIsVisible('ACCOUNT_MANAGE_START_STOP') || false;
    },
    getRoles() {
      getRolesList().then(response => {
        let res = response.data;
        let allRoleFlag = {
          roleid: '',
          rolename: '全部'
        }
        if (res.flag === 1) {
          this.roles = res.data;
          this.roles.unshift(allRoleFlag)
        }
      })
    },
    resetFetch() {
      this.listQuery.roleid = '';
      this.dateScope = null;
      this.listQuery.ordertype = null;
      this.listQuery.begindate = null;
      this.listQuery.enddate = null;
      this.listQuery.username = '';
      this.handleCurrentChange(1)
    },
    fetchData() {
      this.listLoading = true;
      this.page.pageSize = this.page.pageSize || 10;
      this.page.currentPage = this.page.currentPage || 1;
      this.listQuery.currentPage = this.page.currentPage;
      this.listQuery.pageSize = this.page.pageSize;
      this.listQuery.ordertype = this.listQuery.ordertype || '';
      this.listQuery.begindate = this.listQuery.createdatestart || '';
      this.listQuery.enddate = this.listQuery.createdateend || '';
      this.listQuery.username = trimStr(this.listQuery.username) || '';
      this.listQuery.roleid = this.listQuery.roleid || '';
      this.dateScope = this.dateScope || '';
      this.excelParams = getUrlParams(this.listQuery)
      if (this.dateScope) {
        if (this.dateScope[0] && this.dateScope[1]) {
          this.listQuery.begindate = parseTime(this.dateScope[0]);
          this.listQuery.enddate = parseTime(this.dateScope[1]);
        } else {
          this.listQuery.begindate = '';
          this.listQuery.enddate = '';
        }
      }
      getUsersList(this.listQuery).then(response => {
        let res = response.data;
        if (res.flag) {
          this.list = res.data;
          this.page = res.page;
        }
        this.listLoading = false;
      })
    },
    handleExcel() {
      // require.ensure([], () => {
      //   const {
      //       export_json_to_excel
      //     } = require('vendor/Export2Excel');
      //   const tHeader = ['编号', '登录账号', '账号类型', '注册时间', '最近登录', '登录地址', '状态'];
      //   const filterVal = ['uid', 'username', 'countType', 'usercreatedate', 'lastlogin', 'loginaddress', 'usval'];
      //   const list = this.list;
      //   const data = this.formatJson(filterVal, list);
      //   export_json_to_excel(tHeader, data, '列表excel');
      // })
      if (this.list.length <= 0) return;
      this.excelUrl = '/trc-service-system/users/fileLoad' + this.excelParams;
      window.location.href = this.excelUrl;
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleDivisionChange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    createUser() {
      this.$router.push({ path: 'userAdd' });
    },
    editUser(index, row) {
      this.$router.push({ path: 'userEdit', query: { user: row } })
    },
    freezeUser(index, row, status) {
      let isEnable = row.userstatus === '1' ? 0 : 1;
      row.userstatus = isEnable;
      saveUser(row).then(response => {
        let res = response.data;
        if (res.flag === 1) {
          this.fetchData()
        } else {
          this.tipInfo = res.message;
          this.dialogVisible = true
        }
      })
    }
  }
};
</script>